<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>原始记录</title>
</head>
<body>

<script type="text/javascript" src="./$.js"></script>
<script>
    require(['!this.js'], $$.load)
</script>
</body>
</html>



<!--tpl部分-->
<template type="text/html" data-name="this.htm">

    <div>
        <div class="yuanshi" v-if="data">
            <div class="me">
                <div class="work">
                    <div class="calendar">
                        <div class="year">
                            <span>{{data.today}}</span>
                            <span v-if="data.backToday==1" @click="get_oneday()">
                                返回今天
                            </span>
                            <img v-if="data.backToday==1" src="../$res/imgers/right.png">
                        </div>
                        <div class="weekDay">
                            <div class="week">
                            <span v-for="days in data.days">
                                <div class="rest" v-if="days.week=='六'||days.week=='日'">{{days.week}}</div>
                                <div v-else="">{{days.week}}</div>
                            </span>
                            </div>
                            <div class="day" id="day">
                            <span v-for="(days,index) in data.days" @click="get_oneday(days.simple,days.desc,index)">
                                <div v-if="days.ring==1">

                                    <div class="wrong_ring" v-if="days.status=='error'">
                                        <div class="wrong">{{days.day}}</div>
                                    </div>
                                    <div class="ok_ring" v-else-if="days.status=='ok'">
                                        <div class="ok">{{days.day}}</div>
                                    </div>
                                    <div class="singleday_ring" v-else-if="days.status==''">
                                        <div class="singleday">{{days.day}}</div>
                                    </div>
                                </div>
                                <div v-else>
                                    <div class="trans_ring" v-if="days.status=='error'">
                                        <div class="wrong">{{days.day}}</div>
                                    </div>
                                    <div class="trans_ring" v-else-if="days.status=='ok'">
                                        <div class="ok">{{days.day}}</div>
                                    </div>
                                    <div class="trans_ring" v-else-if="days.status==''">
                                        <div class="singleday">{{days.day}}</div>
                                    </div>
                                </div>
                            </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="timeline" v-if="data.list.length!=0">
                <div class="today">
                    <div class="point"></div>
                    <div class="today_time">{{data.today}}</div>
                </div>
                <div v-for="item in data.list">
                    <div class="item" v-if="item.status=='come'">
                        <img src="../$res/imgers/circle_arrive.png">
                        <div class="workinfo">
                            <div class="lineone">
                                <div class="lineone_check">签到</div>
                                <div class="lineone_time">{{item.time}}</div>
                            </div>
                            <div class="lineone">
                                <span>{{item.name}}</span>
                                <span>{{item.dept}}</span>
                            </div>
                        </div>
                        <div class="line"></div>
                    </div>

                    <div class="item" v-else-if="item.status=='leave'">
                        <img src="../$res/imgers/circle_leave.png">
                        <div class="workinfo">
                            <div class="lineone">
                                <div class="lineone_check">签退</div>
                                <div class="lineone_time">{{item.time}}</div>
                                <!--<div class="lineone_totaltime">工作时长9小时52分</div>-->
                            </div>
                            <div class="lineone">
                                <span>{{item.name}}</span>
                                <span>{{item.dept}}</span>
                            </div>
                        </div>
                        <div class="line"></div>
                    </div>
                </div>
            </div>
            <div v-else>
                <div class="no_con" v-if="data.backToday==0">
                    <img src="/rs/kaoqin/$res/imgers/no.png" alt="">
                    <p>还没有人签到哦~</p>
                </div>
                <div class="no_con" v-if="data.backToday==1">
                    <img src="/rs/kaoqin/$res/imgers/no.png" alt="">
                    <p>当天大家在休息啦~</p>
                </div>
            </div>
        </div>
        <foot current="yuanshi"></foot>
    </div>

</template>

<!--JS部分-->
<script data-name="this.js">

    function get_day_data(day,detail,index) {
        weui.loading("加载中");
        $$.ajax({
            url: "/kaoqin/record/lists",
            data: {
                t: day
            },
            /* backToday: 方便模板判断是否需要显示'返回当天'按钮，判断显示'当日打卡情况'或'当前工作状态'
             today: 方便模板显示今天或当天的日期。如果是切换过来的，在切换时会传过来那天是哪天。如果不是会取第一个数据即今天的那个字段。这个接口多少有点不太合适造成的
             ring: 方便模板显示日历日期外面的那个圆环。如果是当天，第一个数据有圆环标记。如果是切换的日期，切换的对应的日期的圆环标记为1*/
            result: {
                $200: function (ret) {
                    weui.loading().hide();

                    $$.m.data = ret.data;
                    if(day){
                        if(index==6){
                            $$.m.data.backToday=0;
                        }else {
                            $$.m.data.backToday=1;
                        }
                        $$.m.data.today = detail;

                        for(var i=0;i<$$.m.data.days.length;i++){
                            $$.m.data.days[i].ring = '';
                        }
                        $$.m.data.days[index].ring = 1;
                    }else{
                        $$.m.data.backToday=0;
                        $$.m.data.today = $$.m.data.days[0].desc;
                        $$.m.data.days[6].ring = 1;
                    }
                }
            }
        });
    }
    require('../$res/js/common');
    module.exports = {
        template: require('!this.htm'),
        methods: {
            get_oneday:get_day_data
        },
        components:{
            'foot':web.foot
        },
        loaded: function () {
            $$.m = {
                data: false
            };
        },
        mounted: function () {
            get_day_data();
        }
    };

</script>